<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="fhp" tagdir="/WEB-INF/tags"%>

<%--
<t:template>
	<jsp:attribute name="header">
      <h1>Welcome</h1>
    </jsp:attribute>
	<jsp:attribute name="footer">
      <p id="copyright">Copyright 1927, Future Bits When There Be Bits Inc.</p>
    </jsp:attribute>
	<jsp:body>
        <p>Hi I'm the heart of the message</p>
    </jsp:body>
</t:template>
 --%>
<fhp:layout>
	<jsp:attribute name="css">
			body>img {
				height: 100%;
				position: fixed;
				width: 100%;
			}
			.image_carousel article {
				border-bottom: 1px dotted #dfdfdf;
			}
	</jsp:attribute>
	<jsp:attribute name="javascript">
		function getScrollMaxY() {
			if ('scrollMaxX' in window) {
				return window.scrollMaxY;
			} else {
				var maxY = document.documentElement.scrollHeight
						- document.documentElement.clientHeight;
				return maxY;
			}
		}

		function getScrollYPosition() {
			if ('pageXOffset' in window) { // all browsers, except IE before version 9
				return window.pageYOffset;
			} else { // Internet Explorer before version 9
				return document.documentElement.scrollTop;
			}
		}

		window.onscroll = function() {

			if (getScrollYPosition() >= getScrollMaxY()) {
				var ss = document.body.scrollHeight;
				document.body.clientHeight;
				document.documentElement.clientHeight;
				document.height;
				new GalleryView().loadNewGallery();
			}

		}
		FullHappyCookie.setCookie('galleryIndex', 0, 1);
	</jsp:attribute>
	<jsp:body>

		<section class="image_carousel">
			<div class="pagination1">dfsdfg</div>
			<div id="gallery_container" class="gallery_container">
				<!-- 
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/basketball.jpg"
						alt="basketball" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>

				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/beachtree.jpg"
						alt="beachtree" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/cupcackes.jpg"
						alt="cupcackes" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/hangmat.jpg"
						alt="hangmat" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/new_york.jpg"
						alt="new york" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/laundry.jpg"
						alt="laundry" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/mom_son.jpg"
						alt="mom son" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/picknick.jpg"
						alt="picknick" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/shoes.jpg"
						alt="shoes" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/paris.jpg"
						alt="paris" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/sunbading.jpg"
						alt="sunbading" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/yellow_couple.jpg"
						alt="yellow couple" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/shoes.jpg"
						alt="shoes" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/paris.jpg"
						alt="paris" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/sunbading.jpg"
						alt="sunbading" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/yellow_couple.jpg"
						alt="yellow couple" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				<article>
					<img
						src="http://caroufredsel.dev7studios.com/examples/images/small/yellow_couple.jpg"
						alt="yellow couple" />
					<footer>
						<div class="title">Footer content</div>
						<div class="price">2500 VND</div>
					</footer>
				</article>
				 -->
				
			</div>
				<script>
					new GalleryView().loadNewGallery();
				</script>
			<div class="clearfix"></div>
<!-- 
			<style>
				.gallery_pagination {
					text-align: center;
					background: -moz-linear-gradient(center top, #F1F1F1, #CBCBCB) repeat
						scroll 0 0 transparent;
					border-color: #E0E0E0 #E0E0E0 #B4B4B4;
					border-style: solid;
					border-width: 1px 0;
					height: 30px;
					padding-top: 12px;
					text-transform: uppercase;
				}
				
				.gallery_pagination strong {
					background: none repeat scroll 0 0 #DDDDDD;
					border: 1px solid #CCCCCC;
					color: #000000;
					cursor: default;
					font-weight: bold;
					overflow: visible;
					padding: 6px 8px;
					vertical-align: middle;
					white-space: nowrap;
				}
				
				.gallery_pagination a {
					background: -moz-linear-gradient(center top, #FFFFFF, #EFEFEF) repeat
						scroll 0 0 #F6F6F6;
					border: 1px solid #CCCCCC;
					color: #0033CC;
					cursor: pointer;
					overflow: visible;
					padding: 6px 9px;
					vertical-align: middle;
					white-space: nowrap;
					text-decoration: none;
					text-align: center;
				}
				
				.gallery_pagination a:hover {
					background: -moz-linear-gradient(center top, #FFFFFF, #EBEBEB) repeat
						scroll 0 0 #F3F3F3;
					border-color: #999999;
					outline: 0 none;
					padding: 6px 9px;
				}
		</style>
			<div class="gallery_pagination" id="foo_pag">
				<a rel="first" href="">Äáº§u trang</a> <a rel="prev" href="">TrÆ°á»c</a>
				<a href="">1</a> <a href="">2</a> <strong>3</strong> <a href="">4</a>
				<a rel="next" href="">Tiáº¿p</a> <a rel="last" href="">Cuá»i cÃ¹ng</a>
			</div>
			
			-->
		</section>
	
	</jsp:body>
	
</fhp:layout>